<script>
export default {
    name: "Home"
}
</script>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Home } from "@/api";
import * as echarts from "echarts";

let cardData = ref({})

// 获取头部数据
let cards = async () => {
    let { status, msg, data } = await Home.header();
    if (status === 200) {
        cardData.value = data.info;
    } else {
        ElNotification.error(msg);
    }
}

// 获取用户数据
let getUserData = async () => {
    let { status, msg, data } = await Home.user();
    if (status === 200) {
        xAxis.value = data.xAxis;
        yAxis.value = data.yAxis;
        series.value = data.series;
        bing_data.value = data.bing_data;
        bing_xdata.value = data.bing_xdata;
        initChart();
        pieChart();
    }
}

let echart = echarts;

// 用户图
let xAxis = ref([])
let yAxis = ref({})
let series = ref([])
let initChart = () => {
    let chart = echart.init(document.getElementById("myEcharts"));
    // 把配置和数据放这里
    chart.setOption({
        xAxis: {
            type: "category",
            data: xAxis.value,
        },
        tooltip: {
            trigger: "axis"
        },
        yAxis: yAxis.value,
        series: [
            {
                data: series.value,
                type: "line",
                smooth: true,
                areaStyle: {}
            }
        ]
    });
};


// 饼图
let bing_data = ref([])
let bing_xdata = ref([])
let pieChart = () => {
    let chart = echart.init(document.getElementById("PieEcharts"));
    // 把配置和数据放这里
    chart.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data: bing_xdata.value
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: bing_data.value,
            }
        ]
    });
};


onMounted(() => {
    cards();
    getUserData();

})
</script>

<template>
    <div class="container">
        <div class="card">
            <el-card class="box-card" shadow="never" v-for="item in cardData">
                <template #header>
                    <div class="card-header">
                        <span>{{ item.title }}</span>
                        <el-tag class="ml-2" type="success">{{ item.date }}</el-tag>
                    </div>
                </template>
                <div class="context">
                    <span class="num">{{ item.today }}</span>
                    <span>昨日{{ item.yesterday }} 日环比<span>{{ item.today_ratio }}</span>%</span>
                </div>
                <div class="bottom">
                    <span>{{ item.total_name }}</span>
                    <span>{{ item.total }}</span>
                </div>
            </el-card>
        </div>
        <div class="system">
            <el-card shadow="hover">
                <el-icon color="#409EFC" size="25px">
                    <UserFilled />
                </el-icon>
                <span>用户管理</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#95de64" size="25px">
                    <Tools />
                </el-icon>
                <span>系统设置</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#ff9c6e" size="25px">
                    <ShoppingCart />
                </el-icon>
                <span>商品</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#b37feb" size="25px">
                    <Checked />
                </el-icon>
                <span>订单管理</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#ffd666" size="25px">
                    <Message />
                </el-icon>
                <span>短信配置</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#5cdbd3" size="25px">
                    <Tickets />
                </el-icon>
                <span>文章管理</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#ff85c0" size="25px">
                    <PriceTag />
                </el-icon>
                <span>分销管理</span>
            </el-card>
            <el-card shadow="hover">
                <el-icon color="#ffc069" size="25px">
                    <Ticket />
                </el-icon>
                <span>优惠券</span>
            </el-card>
        </div>
        <div class="orders">
            <el-card class="box-card" shadow="never">
                <template #header>
                    <div class="card-header">
                        <div class="left-header">
                            <div class="icon">
                                <el-icon color="#1890ff">
                                    <Histogram />
                                </el-icon>
                            </div>
                            <span>订单</span>
                        </div>
                        <div class="right-header">
                            <ul>
                                <li>30天</li>
                                <li>周</li>
                                <li>月</li>
                                <li>年</li>
                            </ul>
                        </div>
                    </div>
                </template>
                <div class="order-content">
                    <span>订单量趋势</span>
                </div>
            </el-card>
        </div>
        <div class="user">
            <div class="left-user">
                <el-card class="box-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <div class="icon">
                                <el-icon color="#1890ff">
                                    <User />
                                </el-icon>
                            </div>
                            <span>用户</span>
                        </div>
                    </template>
                    <div class="user-content">
                        <div id="myEcharts" :style="{ width: '800px', height: '350px' }"></div>
                    </div>
                </el-card>
            </div>
            <div class="right-user">
                <el-card class="box-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <div class="icon">
                                <el-icon color="#1890ff">
                                    <TrendCharts />
                                </el-icon>
                            </div>
                            <span>购买用户统计</span>
                        </div>
                    </template>
                    <div style="display: flex;justify-content: center;">
                        <div id="PieEcharts" :style="{ width: '350px', height: '350px' }"></div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.container {

    .card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .box-card {
            width: 315px;
            border: none;

            .card-header {
                display: flex;
                justify-content: space-between;
            }


            .context {
                padding: 15px 0px;

                .num {
                    display: block;
                    font-size: 30px;
                    padding-bottom: 10px;
                }
            }

            .bottom {
                padding-top: 10px;
                border-top: 1px solid #ccc;
                display: flex;
                justify-content: space-between;
            }
        }

    }

    .system {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0px;

        .el-card {
            width: 140px;
            text-align: center;
            vertical-align: middle;
            border: none;

            .el-icon {
                display: block;
                margin: auto;
                margin-bottom: 10px;
            }
        }
    }

    .orders {
        .box-card {
            border: none;
            margin-bottom: 20px;

            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 20px;

                .left-header {
                    display: flex;

                    .icon {
                        width: 24px;
                        height: 24px;
                        line-height: 24px;
                        border-radius: 12px;
                        background-color: #e6f7ff;
                        text-align: center;
                        margin-right: 10px;
                    }
                }

                .right-header {
                    ul {
                        list-style: none;

                        li {
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }
                }

            }

            .order-content {
                span {
                    font-weight: bold;
                }
            }
        }
    }

    .user {
        display: flex;
        justify-content: space-between;

        .left-user,
        .right-user {
            width: 62%;

            .box-card {
                .card-header {
                    display: flex;

                    .icon {
                        width: 24px;
                        height: 24px;
                        line-height: 24px;
                        border-radius: 12px;
                        background-color: #e6f7ff;
                        text-align: center;
                        margin-right: 10px;
                    }
                }

            }
        }

        .right-user {
            width: 35%;
        }
    }
}
</style>